import React from "react";
import * as monaco from 'monaco-editor';
import {EditorCom} from "@/components/editor";
import {editorShortCut} from "@/common/util";
import {getSqlSuggestionsList} from "@/common/models/sql-suggestions";
import './index.css'

interface ISQLProps {
  value?: string;
  className?: string;
  readOnly?: boolean;
}

class Sql extends React.Component<ISQLProps> {

  private editor: monaco.editor.IStandaloneCodeEditor;

  constructor(props) {
    super(props)
    this.editor = undefined;
  }

  // public getEditorValue = () => {
  //   return this.editor?.getValue();
  // }

  public customMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => {
    this.editor = editor;
    const model: any = editor.getModel();
    const lineNumber = model.getLineCount();

    editor.setPosition({
      lineNumber,
      column: model.getLineMaxColumn(lineNumber),
    });

    const suggestions = getSqlSuggestionsList();

    monaco.languages.registerCompletionItemProvider('sql', {
      provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
        const word = model.getWordUntilPosition(position);
        const range = {
          startLineNumber: position.lineNumber,
          endLineNumber: position.lineNumber,
          startColumn: word.startColumn,
          endColumn: word.endColumn,
        };
        return {
          suggestions: suggestions.map(item => ({...item, range})),
        };
      },
      triggerCharacters: [':'],
    });

    editorShortCut(editor)
  }

  public render() {
    const {value = '211212', className, readOnly = false} = this.props;
    return (
      <div className={`${className} tab-container`}>
        <EditorCom
          options={{
            language: 'sql',
            value: value,
            theme: 'vs',
            wordWrap: 'on',
            automaticLayout: true,
            readOnly: readOnly,
          }}
          customMount={this.customMount}
          placeholder={'2121'}
          style={{minHeight: 100}}
        />
      </div>
    );
  }
}

export default Sql
